<template>
    <view class="top-up-main-list">
        <view class="top-up-item" :class="state.curItem.ID == item.ID ? 'top-up-item-cur' : ''" v-for="item in state.walletPricesList" @click="checkFn(item)">
            <view class="top-up-item-gold-coin">
                <view class="top-up-item-gold-coin-num">
                    <img src="@/assets/image/icon25.png" alt="">
                    <text>{{item.Gold}}</text>
                </view>
                <view class="top-up-item-gold-coin-num-bottom">
                    ￥{{item.Money}}
                </view>
            </view>
        </view>
    </view>
</template>
    
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import {
    walletPrices
} from "@/api/person/index.js"

import { onLoad } from '@dcloudio/uni-app'

let {proxy} = getCurrentInstance()

const emits = defineEmits(["update:topUpPrice"])

const state = reactive({
    show: false,
    curItem: {},
    walletPricesList:[]
})

onLoad((options) => {
})

onMounted(() => {
    getWalletPrice()
})

const getWalletPrice = async () => {
    let data = await proxy.$get(walletPrices)
    if(data.code == 200){
        data.data.forEach(o => {
            o.Price = o.Money
        });
        state.walletPricesList = data.data
    }
}

const checkFn = (item) => {
    state.curItem = item
    emits("update:topUpPrice",item)
}


</script>
    
<style lang="scss" scoped>
.top-up-main-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 30rpx;

    .top-up-item {
        width: calc(33.33% - 40rpx);
        box-sizing: border-box;
        height: 152rpx;
        border-radius: 12rpx;
        border: 4rpx solid #F2F2F2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 30rpx;
        margin-bottom: 30rpx;

        .top-up-item-gold-coin-num {
            display: flex;
            align-items: center;

            img {
                width: 36rpx;
                height: 36rpx;
            }

            text {
                color: #262626;
                font-size: 32rpx;
                font-weight: 600;
                margin-left: 10rpx;
            }
        }

        .top-up-item-gold-coin-num-bottom {
            color: #999;
            font-size: 32rpx;
            text-align: center;
            margin-top: 10rpx;
            font-weight: normal;
        }
    }

    .top-up-item-cur {
        border-color: #222;
        background: url("@/assets/image/icon73.png") 103% 0 no-repeat;
        background-size: 44rpx;
    }
}</style>
    